<template>
  <div>
    <el-row>
        <el-col class="left">
            <div class="list-item" v-for="(item,index) in leftList" :key="index">
                <img :src="item.img" alt="">
                <p>{{item.title.slice(0,25) + '...'}}</p>
                <span>
                    <span>￥</span>
                    {{item.price}}
                </span>
            </div>
        </el-col>
        <el-col class="right">
            <div class="list-item" v-for="(item,index) in rightList" :key="index">
                <img :src="item.img" alt="">
                <p>{{item.title.slice(0,25) + '...'}}</p>
                <span>
                    <span>￥</span>
                    {{item.price}}
                </span>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        leftList:function() {
            return this.getNowList.filter((item,index) => {
                return index % 2 == 0
            })
        },
        rightList:function() {
            return this.getNowList.filter((item,index) => {
                return index % 2 !== 0
            })
        },
        ...mapGetters(['getNowList'])
    },
    methods:{
        ...mapActions(['getShop','filterData'])
    },
    created() {
        this.getShop();
        // this.filterData('京东到家');
    }
}
</script>

<style scoped>
.el-row {
    width: 100%;
}
.el-col{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.list-item{
    width: 90%;
    margin: 3% !important;
    border-radius: 10px;
    background-color: white;
}
.list-item img{
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}
.list-item p{
    font-size: 0.8rem;
    padding: 4% !important;
}
.list-item span{
    color : red;
    padding: 4% !important;
}
.list-item span span{
    font-size: 10px;
    color : red
}
</style>